<template>
  <div>
    <!-- Start 顶部导航栏-->
    <Top></Top>
    <!-- End 顶部导航栏 -->
    <!-- Start 侧边导航栏-->
    <Sidebar
      :editableTabs="editableTabs"
      :addTabAndChose="addTabAndChose"
    ></Sidebar>
    <!-- End 侧边导航栏 -->

    <!-- Start 右侧标签栏-->
    <el-main :offset="4">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        @edit="handleTabsEdit"
        :before-leave="choseTag"
        closable
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
      <router-view v-if="routerViewVisible" :reloadRouterView="reloadRouterView"></router-view>
    </el-main>
    <!-- End 右侧标签栏-->
  </div>
</template>

<script>
import Top from "@/pages/top/Top";
import Sidebar from "@/pages/sidebar/Sidebar";
export default {
  name: "Admin",
  data() {
    return {
      editableTabsValue: "用户管理",
      editableTabs: [
        {
          title: "用户管理",
          name: "用户管理",
          path: "/admin/user",
        },
        {
          title: "角色管理",
          name: "角色管理",
          path: "/admin/role",
        },
        {
          title: "权限管理",
          name: "权限管理",
          path: "/admin/perm",
        },
      ],
      tabIndex: 1,
      routerViewVisible: true // 路由视图是否可见
    };
  },
  methods: {
    // 当编辑标签时
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      }
    },
    // 添加新的标签并选择
    addTabAndChose(tabName, tagPath, chose) {
      this.editableTabs.push({
        title: tabName,
        name: tabName,
        path: tagPath,
      });
      if (chose) this.editableTabsValue = tabName;
    },
    // 选择标签
    choseTag(tabName){
       // 定位到标签
      var tab = this.editableTabs.filter((tab) => tab.name === tabName);
      this.editableTabsValue = tabName;
        tab = tab[0];
        // 设置路由
      this.$router.push({
        path: tab.path,
        query: {
          size: 5,
          p: 1,
        },
      });
    },
    // 刷新视图
    reloadRouterView(){
      this.routerViewVisible = false
      this.$nextTick(function() {
        this.routerViewVisible = true
      })
    }
  },
  components: { Top, Sidebar },
};
</script>

<style scoped>
.breadcrumb{
  padding: 5px;
}
</style>